<script lang="ts" setup>
import { Comment } from '@element-plus/icons-vue';
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { posts } = useStore();
const { list } = storeToRefs(posts);
</script>

<template>
	<div class="post-bar-left">
		<el-icon>
			<Comment />
		</el-icon>
		<span>{{ list.length }}</span>
	</div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss';

.post-bar-left {
	float: left;
	width: 10%;
	height: 35px;
	text-align: center;

	span {
		display: inline-block;
		height: 100%;
		line-height: 45px;
		margin-left: 5px;
	}

	::v-deep .el-icon {
		font-size: 25px;
		vertical-align: bottom;
		color: $theme;
	}
}
</style>
